<template>
    <PullRefresh :model-value="instance.loading" @update:model-value="(value) => instance.loadingChange(value)"
        @refresh="() => instance.refresh(1)" :disabled="instance.disabledRefresh">
        <h4 v-if="title">{{ title }}</h4>
        <slot name="top"></slot>
        <vList :finished="!instance.has_next" :finished-text="instance.finishedText" @load="() => instance.next()"
            :disabled="disabled" :immediate-check="instance.immediateCheck">
            <template v-for="data, index in instance.list" :key="index">
                <component :is="$slots.swiper_right ? SwipeCell : 'div'" :style="`margin: ${instance.spance}px 0`">
                    <template #right>
                        <div style="margin-right: 12px;">
                            <slot name="swiper_right" :index="index" :data="data"></slot>
                        </div>
                    </template>
                    <div @click="$emit('about', data, index)" style="background-color: var(--van-background);">
                        <slot name="title" :row="data" :index="index"></slot>
                        <template v-if="!instance.reSetphone">
                            <template v-for="item, prop in instance.labels" :key="prop">
                                <template v-if="item">
                                    <Cell :title="item.label">
                                        <component
                                            v-if="item && (!item.show || item.show({ data, type: 'list', isPhone: true }))"
                                            :is="tableRender.render(data, item, index)">
                                        </component>
                                    </Cell>
                                </template>
                            </template>
                        </template>
                    </div>
                    <component :is="renderButtom(data, index)"></component>
                </component>
            </template>
            <template #finished v-if="$slots.finished">
                <slot name="finished"></slot>
            </template>
        </vList>
    </PullRefresh>
</template>
<script lang="ts" setup generic="T extends Record<string, any>">
import { PullRefresh, List as vList, Cell, SwipeCell, Popover, Icon, Button, showDialog } from "vant";
import { h, computed, onMounted } from "vue";
import type { listButton } from "@b/model/base/type";
import { List } from "@b/model/base/list";
import { TableRender } from "./render_item"

interface prop {
    title?: string
    instance: List<T>
}
defineEmits(['about'])
const { instance } = defineProps<prop>()
const disabled = computed(() => instance.loading || !instance.has_next)
const tableRender = new TableRender<T, keyof T & string>()

const onDelete = (message: string = '是否删除当前数据', cb: () => void) => {
    showDialog({
        title: '提示',
        message,
        showCancelButton: true
    }).then(() => {
        cb()
    }).catch(() => { })
}
const renderButtom = (data: T, index: number) => {
    const actions = instance.actions ? instance.actions({ isPhone: true, data, index }) : []
    const button = () => {
        const action = actions.shift();
        if (!action) return
        return h(Button, {
            type: action.type || 'default',
            plain: true,
            style: { border: 'none' },
            onClick: () => {
                if (action.hasConfirm) {
                    onDelete(action.confirmText, () => action.onClick(data, index))
                } else {
                    action.onClick(data, index)
                }
            }
        }, { default: () => action.text })
    }
    const button1 = button()
    const button2 = button()
    const popover = (() => {
        if (actions.length === 0) return
        return h(Popover, {
            actions: actions, placement: 'top-start', onSelect: (action: listButton<T>) => {
                if (action.hasConfirm) {
                    onDelete(action.confirmText, () => action.onClick(data, index))
                } else {
                    action.onClick(data, index)
                }
            }
        }, {
            reference: () => h(Button, {
                style: { border: 'none' },
            }, { default: () => h(Icon, { name: 'ellipsis' }) })
        })
    })()
    return h('div', { className: 'bottombutton', style: { borderColor: 'var(--van-gray-5)' } }, { default: () => [popover, button2, button1] })
}

onMounted(() => {
    if (instance.immediateCheck) {
        if (instance.hasPages)
            instance.getPage();
        else
            instance.getList();
    }
});
</script>
<style scoped>
.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    background-color: var(--van-background);
}

.img {
    width: 2em;
    height: 2em;
}
</style>